<template>
  <div>
    <form>
      <div>
        <label>姓名：</label>
        <input type="text" v-model="Incomeproofapplications.RealName" />
      </div>
      <div>
        <label>部门：</label>
        <input type="text" v-model="Incomeproofapplications.Department" />
      </div>
      <div>
        <label>岗位：</label>
        <input type="text" v-model="Incomeproofapplications.Title" />
      </div>

      <div>
        <label>申请日期：</label>
        <input type="date" v-model="Incomeproofapplications.StartDate" />
      </div>

      <div>
        <label>申请事由：</label>
        <textarea class="limited-size" v-model="Incomeproofapplications.Purpose"></textarea>
      </div>

      <hr>

      <label class="AaA">下一步审批人：</label>
      <div class="AAA">
        <div class="aaa">
          <select v-model="nextApprover" class="asas">
            <option value="">请选择</option>

          </select>
        </div>
      </div>
      <div class="aaaa">
        <button type="button" style="margin-right: 50px;" @click="submitApplication">确定</button>
        <button type="button" @click="cancelApplication">取消</button>
      </div>
    </form>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";

export default {
  data() {
    return {
      Incomeproofapplications: {
        RealName: '',
        Department: '',
        Title: '',
        StartDate: '',
        Purpose: ''
      },
      nextApprover: '',
      // 可以添加一个变量用于表示加载状态，比如在请求进行时显示加载提示给用户
      isLoading: false
    };
  },
  methods: {
    // 提交收入证明申请的方法
    submitApplication() {
      this.isLoading = true; // 设置加载状态为 true，表示正在提交请求
      axios.post('/api/income-proof-applications', this.Incomeproofapplications)
        .then(response => {
          console.log('收入证明申请提交成功', response.data);
          // 在这里可以根据后端返回的数据进行相应操作，比如提示用户申请已成功提交
          // 例如可以通过一些 UI 框架的消息提示组件来显示提示信息（此处省略具体实现）
          this.resetForm(); // 重置表单数据，方便下次填写
        })
        .catch(error => {
          console.error('收入证明申请提交失败', error);
          // 同样可以在这里添加错误提示逻辑，告知用户提交失败原因（此处省略具体实现）
        })
        .finally(() => {
          this.isLoading = false; // 无论请求成功还是失败，都将加载状态设置为 false
        });
    },
    // 取消申请的操作逻辑，重置表单
    cancelApplication() {
      this.resetForm();
    },
    // 重置表单数据的方法
    resetForm() {
      this.Incomeproofapplications = {
        RealName: '',
        Department: '',
        Title: '',
        StartDate: '',
        Purpose: ''
      };
      this.nextApprover = '';
    },
    // 可以添加一个方法用于获取审批人列表（假设后端有对应接口提供审批人数据）
    fetchApprovers() {
      return axios.get('/api/approvers')
        .then(response => {
          const approvers = response.data;
          // 处理审批人数据，比如将其格式化为适合下拉框展示的格式（此处省略具体处理）
          return approvers;
        })
        .catch(error => {
          console.error('获取审批人列表失败', error);
          return [];
        });
    },
    // 在组件挂载时调用获取审批人列表的方法，填充下拉框选项
    async mounted() {
      const approvers = await this.fetchApprovers();
      // 假设后端返回的数据格式为 [{id: 1, name: '审批人1'}, {id: 2, name: '审批人2'}]
      // 需要将其转换为适合v-model绑定下拉框的格式，例如：
      const options = approvers.map(approver => ({
        value: approver.id,
        label: approver.name
      }));
      // 这里简单示例，你可能需要根据实际后端数据结构进行调整
      this.nextApprover = options[0]?.value || ''; // 可以设置一个默认选中项（这里取第一个，若没有则为空）
    }
  }
};
</script>

<style>

.limited-size {
  width: 100%;
  height: 250px;
}

hr{
  border: 1px solid #000000;
  margin-bottom: 20px;
}

.aaaa{
  position: relative;
  left: 1000px;
  top: -70px;
  width: 100%;

  height: 100%;
  justify-content: space-around; /* 按钮水平均匀分布 */

}

.AaA{
  position: relative;

  top: 20px;
}

.AAA{
  transform: translateX(120px);
}

.aaa{
  transform: translateY(-20px);
}

/*.move-down {*/
/*  transform: translateX(125px); /* 向右移动20px */
/*}*/

/*.move-down { */
/*transform: translateY(-20px);  向下移动20px */
/*} */

.asas{
  width: 50%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

form {
  width: 100%;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
}

input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button[type="button"] {
  margin-right: 10px;
}

button[type="button"]:nth-child(1) {
  background-color: #4CAF50;
  color: white;
}

button[type="button"]:nth-child(2) {
  background-color: #f44336;
  color: white;
}

button[type="button"]:hover {
  opacity: 0.8;
}
</style>
